<template>
	<view class="forget">
		<view class="navigation">
			<view class="navigation_back" @tap="backref()">
				<uni-icons type="back" size="24" color="#fff"></uni-icons>
			</view>
			<view class="navigation_title">
				忘记密码
			</view>
		</view>
		<view class="forget_con">
			<view class="forget_form">
				<view class="form_item form_phone">
					<view class="form_item_icon">
						<image src="../../static/image/forget/phone.svg" mode=""></image>
					</view>
					<view class="form_item_label">
						手机号
					</view>
					<view class="form_item_input">
						<input type="text" placeholder="请输入手机号" placeholder-class="placeholder">
					</view>
				</view>
				<view class="form_item form_code">
					<view class="form_item_icon">
						<image src="../../static/image/forget/code.svg" mode=""></image>
					</view>
					<view class="form_item_label">
						验证码
					</view>
					<view class="form_item_input">
						<input type="text" placeholder="请输入验证码" placeholder-class="placeholder">
					</view>
					<view class="require_code">
						获取验证码
					</view>
				</view>
				<view class="form_item form_password">
					<view class="form_item_icon">
						<image src="../../static/image/forget/lock.svg" mode=""></image>
					</view>
					<view class="form_item_label">
						密码
					</view>
					<view class="form_item_input">
						<input type="password" placeholder="请输入新密码" placeholder-class="placeholder">
					</view>
				</view>
				<view class="form_item form_sure_password">
					<view class="form_item_icon">
						<image src="../../static/image/forget/lock.svg" mode=""></image>
					</view>
					<view class="form_item_label">
						确认密码
					</view>
					<view class="form_item_input">
						<input type="password" placeholder="请重复确认新密码" placeholder-class="placeholder">
					</view>
				</view>
			</view>
			<view class="form_sure">
				<button>确认密码</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.navigation {
		width: 100%;
		height: 260rpx;
		background-color: #2588FF;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #fff;
			font-size: 36rpx;
		}
	}

	.forget_con {
		position: relative;
		z-index: 2;
		padding: 40rpx 32rpx 180rpx;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #F4F4F4;
		margin-top: -100rpx;

		.forget_form {
			.form_item {
				position: relative;
				display: flex;
				align-items: center;
				background-color: #fff;
				height: 104rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				padding: 0 24rpx;

				.require_code {
					position: absolute;
					right: 40rpx;
					color: #333;
					font-size: 24rpx;
				}

				.form_item_icon {
					margin-top: 10rpx;

					image {
						width: 40rpx;
						height: 46rpx;
					}
				}

				.form_item_label {
					margin-left: 10rpx;
					color: #333;
					font-size: 28rpx;
					width: 150rpx;
				}

				.form_item_input {
					input {
						color: #333;
						font-size: 24rpx;

						&.placeholder {
							color: #9098A0;
						}
					}
				}
			}
		}

		.form_sure {
			position: fixed;
			left: 0;
			bottom: 50rpx;
			width: 100%;
			padding: 0 24rpx;

			button {
				height: 80rpx;
				background-color: #2588FF;
				color: #fff;
				font-size: 28rpx;
				font-weight: 700;
				border: 0;
				line-height: 80rpx;
				border-radius: 80rpx;
			}
		}
	}
</style>